<template>
    <div id="top-header">
        <dv-decoration-8 class="header-left-decoration" />
        <dv-decoration-5 class="header-center-decoration" />
        <dv-decoration-8 class="header-right-decoration" :reverse="true" />
        <div class="center-title">{{ areaName }}餐饮油烟综合治理服务平台</div>
        <el-icon :size="30" @click="toHome" class="home" title="返回首页">
            <House />
        </el-icon>
        <el-icon :size="30" class="fullscreen" @click="toggleFullScreen" :title="isFullScreen">
            <FullScreen />
        </el-icon>
        <el-select
            @change="selectChange"
            class="areaselect"
            v-model="areaSelect"
            placeholder="选择区域"
            size="large"
            style="width: 150px"
        >
            <el-option
                v-for="item in areaOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, onUnmounted } from 'vue'
import http from '@/utils/http'
import { useRoute } from 'vue-router'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'

const areaName = ref('')

const route = useRoute()

const selectChange = e => {
    if (e) {
        location.href = `${
            process.env.NODE_ENV === 'development' ? '/' : '/datav/'
        }index.html?area=${e}`
    } else {
        location.href = `${process.env.NODE_ENV === 'development' ? '/' : '/datav/'}index.html`
    }
}

const areaOptions = ref([])

const areaSelect = ref('')

onMounted(async () => {
    console.log(route.query)
    var area = util.GetQueryParam('area')
    var res = await http.get(`getareaname?area=${area ? area : ''}`)
    if (res.status === 0) {
        areaName.value = res.data
    } else {
        console.log(res)
        ElMessage(res.msg)
    }

    res = await http.get(`getarealist?area=${area ? area : ''}`)
    if (res.status === 0) {
        areaOptions.value = res.data
    } else {
        console.log(res)
        ElMessage(res.msg)
    }
})

const toHome = () => {
    location.href = '/'
}

const isFullScreen = ref('全屏')

function toggleFullScreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
        isFullScreen.value = '全屏'
    } else {
        document.exitFullscreen()
        isFullScreen.value = '退出全屏'
    }
}

const handleFullScreenChange = () => {
    isFullScreen.value = !document.fullscreenElement ? '全屏' : '退出全屏'
}

onBeforeMount(() => {
    document.addEventListener('fullscreenchange', handleFullScreenChange)
    document.addEventListener('webkitfullscreenchange', handleFullScreenChange)
})

onUnmounted(() => {
    document.removeEventListener('fullscreenchange', handleFullScreenChange)
    document.removeEventListener('webkitfullscreenchange', handleFullScreenChange)
})
</script>

<style lang="less" scoped>
#top-header {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;

    .header-center-decoration {
        width: 50%;
        height: 60px;
        margin-top: 35px;
    }

    .header-left-decoration,
    .header-right-decoration {
        width: 25%;
        height: 60px;
    }

    .center-title {
        position: absolute;
        font-size: 30px;
        font-weight: bold;
        left: 50%;
        top: 8px;
        transform: translateX(-50%);
    }

    .home {
        position: absolute;
        top: 8px;
        right: 80px;
        z-index: 100;
        color: #fff;
        cursor: pointer;
    }

    .fullscreen {
        position: absolute;
        top: 8px;
        right: 30px;
        z-index: 100;
        color: #fff;
        cursor: pointer;
    }

    .areaselect {
        position: absolute;
        bottom: 5px;
        right: 250px;
        z-index: 100;
    }
}
</style>
